<template>
	<view class="warp">
		<view class="top_tab">
			<view @click="changevalue(0)" style="margin-right: 20rpx;" :class="tabnum==0?'talk active':'talk'">
				TALK
			</view>
			<view @click="changevalue(1)" :class="tabnum==1?'vote active':'vote'" >
				投票
			</view>
		</view>
		<view class="" v-if="tabnum==0">
			<!-- 最新课程 -->
			<view class="new">
				<view class="newclass">
					<view class="hot_title">
						<view class="ht_left">
							最新课程
						</view>
						<view class="ht_right">
							<span  style="color: #cecece;display: block;">查看更多</span>
							<uni-icons color="#cecece" type="forward" size="18"></uni-icons>
						</view>
					</view>
					<view class="new_list">
						<view class="new_item" v-for="(item,index) in 4">
							<view class="hot_left">
								<image style="width: 300rpx; height: 190rpx;" src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/staduy2.0/013.png" mode="aspectFill"></image>
								<view class="hot_left_bottom">
									<view class="name">
										刘小欣
									</view>
									<view class="zhiwei">
										中国地坪协会首席专家
									</view>
									<!-- <view class="zhiwei">
										中国地坪协会首席专家
									</view> -->
								</view>
							</view>
							<view class="i_bottom">
								<view class="r_top_classname">
									如何控制混凝土开裂
								</view>
								 
								<view class="r_bottom">
									<view class="r_b_left">
										免费
									</view>
									<view class="r_b_right">
										<span>256</span>
										<span>人已学习</span>
									</view>
								</view>
							</view>
						</view>
						
					</view>
				</view>
			</view>
			<!-- 往期回顾 -->
			<view class="beforelist">
				<view class="hot_title">
					<view class="ht_left">
						往期回顾
					</view>
					<view class="ht_right">
						<span  style="color: #cecece;display: block;">查看更多</span>
						<uni-icons color="#cecece" type="forward" size="18"></uni-icons>
					</view>
				</view>
				<view class="mouthlist">
					<view class="mouth_item" v-for="(val,index) in 6" :key="index">
						<view class="mouthnum">
							{{index+1}}月
						</view>
						<view class="list">
							<view class="l_item" v-for="(item,index) in 4">
								<view class="hot_left">
									<image style="width: 320rpx; height: 210rpx;" src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/staduy2.0/013.png" mode="aspectFill"></image>
									<view class="hot_left_bottom">
										<view class="name">
											刘小欣
										</view>
										<view class="zhiwei">
											中国地坪协会首席专家
										</view>
										<!-- <view class="zhiwei">
											中国地坪协会首席专家
										</view> -->
									</view>
								</view>
								<view class="r_top_classname">
									如何控制混凝土开裂
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="" v-if="tabnum==1">
			<view class="talkstar">
				<view class="talk_title">
					<view class="ht_left">
						TALK之星
					</view>
					<!-- <view class="ht_right">
						<span  style="color: #cecece;display: block;">查看更多</span>
						<uni-icons color="#cecece" type="forward" size="18"></uni-icons>
					</view> -->
				</view>
				<view class="paiming">
					<view class="star">
						<view class="p_item"  style="margin-top: 40rpx;">
							<view class="image_2">
								<image style="width: 46rpx; height: 66rpx;position: absolute;bottom: -30rpx;left: 30rpx;" src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/staduy2.0/008.png" mode=""></image>
							</view>
							<view class="name" >
							刘小欣
							</view>
							<view class="vote">
								投票
							</view>
						</view>
						<view class="p_item" >
							<view class="image_1">
								<image style="width: 46rpx; height: 66rpx;position: absolute;bottom: -30rpx;left: 30rpx;" src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/staduy2.0/007.png" mode=""></image>
							</view>
							<view class="name" style="margin-top: 70rpx;">
								刘小欣
							</view>
							<view class="vote">
								投票
							</view>
						</view>
						<view class="p_item" style="margin-top: 40rpx;">
							<view class="image_3">
								<image style="width: 46rpx; height: 66rpx;position: absolute;bottom: -30rpx;left: 30rpx;" src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/staduy2.0/009.png" mode=""></image>
							</view>
							<view class="name">
								刘小欣
							</view>
							<view class="vote">
								投票
							</view>
						</view>
					</view>
				</view>
				<view class="pa_bottom">
					今日剩余投票次数：10次
				</view>
			</view>
			<!-- 讲师风采 -->
			<view class="teacherstyle">
				<view class="hot_title">
					<view class="ht_left">
						讲师风采
					</view>
					<view class="ht_right">
						<span  style="color: #cecece;display: block;">查看更多</span>
						<uni-icons color="#cecece" type="forward" size="18"></uni-icons>
					</view>
				</view>
				<view class="ts_list">
					<view class="ts_item" v-for="(item,index) in 3">
						<view class="ts_left">
							<view class="name">
								<view class="top">
									讲师: 刘小欣
								</view>
								<view class="t_vote">
									投票
								</view>
							</view>
							<view class="year">
								从事行业xxx年|合肥市
							</view>
							<view class="touxian">
								中国建材联合会地坪分会副秘书长 首席专家 技术委员会主任
							</view>
							<view class="piaonum">
							共256票
							</view>
						</view>
						<view class="ts_right">
							<image style="width:270rpx; height: 250rpx;" src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/staduy2.0/010.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
			<!-- 奖励 -->
			<view class="money">
				<view class="hot_title">
					<view class="ht_left">
						TALK之星奖励
					</view>
					<view class="ht_right">
						<span  style="color: #cecece;display: block;">查看更多</span>
						<uni-icons color="#cecece" type="forward" size="18"></uni-icons>
					</view>
				</view>
				<view class="m_list">
					<view class="m_item">
						<view class="m_img">
							<image style="width: 170rpx;" src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/staduy2.0/011.png" mode="widthFix"></image>
						</view>
						<view class="m_pai">
					           第一名
						</view>
						<view class="m_moneynum">
							现金8888元
						</view>
					</view>
					<view class="m_item">
						<view class="m_img">
							<image style="width: 170rpx;" src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/staduy2.0/011.png" mode="widthFix"></image>
						</view>
						<view class="m_pai">
					           第一名
						</view>
						<view class="m_moneynum">
							现金8888元
						</view>
					</view>
					<view class="m_item">
						<view class="m_img">
							<image style="width: 170rpx;" src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/staduy2.0/011.png" mode="widthFix"></image>
						</view>
						<view class="m_pai">
					           第一名
						</view>
						<view class="m_moneynum">
							现金8888元
						</view>
					</view>
					
				</view>
				
			</view>
			<!-- 规则 -->
			<view class="guize">
				<view class="hot_title">
					<view class="ht_left">
						TALK之星活动规则
					</view>
					<view class="ht_right">
						<span  style="color: #cecece;display: block;">查看更多</span>
						<uni-icons color="#cecece" type="forward" size="18"></uni-icons>
					</view>
				</view>
				<view class="textcontent">
					<view class="">
						1.投票采取不记名制，通过东之策学院为您喜爱的讲师投票；
					</view>
					<view class="">
						2.参与方式：登录东之策学院为talker投票，助他成为talk之星；
					</view>
					<view class="">
						3.投票方式：每位学院用户在活动时间内，每天可投10次；
					</view>
					<view class="">
						4.本活动参与者应具有完全民事行为能力的自然人，任何违规手段参与本次活动的投票数，将不计入最终数据；
					</view>
					<view class="">
						5.本次投票最终解释权归东之策。
					</view>
				</view>
			</view>
		</view>
		<view class="" style="height: 200rpx;">
			
		</view>
		<tabBar selectedIndex = 2 ></tabBar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabnum:0
			};
		},
		methods:{
			changevalue(val){
				this.tabnum=val
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #f2f2f2;
		width: 750rpx;
		margin: 0 auto;
	}
  .warp{
	  .top_tab{
		  margin-top: 10rpx;
		  padding: 0 160rpx;
		  height: 80rpx;
		  background-color: #fff;
		  font-size: 30rpx;
		  display: flex;
		  line-height: 80rpx;
		  display: flex;
		  justify-content: space-between;
		  // font-weight: 600;
		  .active{
			  font-size: 34rpx;
			  color: #fc701e;
			   font-weight: 600;
		  }
	  }
	  .newclass{
		  margin-top: 10rpx;
	  	padding: 20rpx;
	  	background-color: #fff;
	  	.hot_title{
	  		display: flex;
	  		justify-content: space-between;
	  		align-items: center;
			padding: 10rpx 0;
	  		.ht_right{
	  			display: flex;
	  			// justify-content: space-between;
	  			align-items: center;
	  			font-size: 24rpx;
	  		}
	  		.ht_left{
	  			font-size: 32rpx;
	  			font-weight: 600;
	  		}
	  	}
	  	.new_list{
	  		display: flex;
	  		justify-content: space-between;
			flex-wrap: wrap;
	  	}
	  	.new_item{
	  		width: 340rpx;
			padding: 8rpx;
			border: 2rpx solid #e6e6e6;
			border-radius: 10rpx;
			margin-bottom: 10rpx;
	  	   .hot_left{
			  
	  		  position: relative; 
			  background-image: url('https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/staduy2.0/012.png');
			   // background-color: red;
			   background-size: cover;
	  	   }
	  		.hot_left_bottom{
	  			width: 100%;
	  			background-color: #b33129;
	  			font-size: 18rpx;
	  			color: #fff;
	  			border-radius: 10rpx;
	  			padding: 10rpx 15rpx;
	  			position: absolute;
	  			bottom: 0;
	  			height: 65rpx;
	  		}
	  		.i_bottom{
	  			.r_top_classname{
	  				font-size: 28rpx;
	  				font-weight: 600;
	  			}
	  			
	  			.r_bottom{
	  				padding: 20rpx 0;
	  				display: flex;
	  				justify-content: space-between;
	  				.r_b_left{
	  					color: #F12B10;
	  					font-size: 26rpx;
	  				}
	  				.r_b_right{
	  				font-size: 24rpx;
	  				color: #666666;
	  				}
	  			}
	  		}
	  	}
	  }
	  .beforelist{
		  background-color: #fff;
		  margin-top: 10rpx;
		  padding: 20rpx;
		  .hot_title{
		  	display: flex;
		  	justify-content: space-between;
		  	align-items: center;
		  	.ht_right{
		  		display: flex;
		  		// justify-content: space-between;
		  		align-items: center;
		  		font-size: 24rpx;
		  	}
		  	.ht_left{
		  		font-size: 32rpx;
		  		font-weight: 600;
		  	}
		  }
		  .mouthlist{
			  padding: 20rpx 0;
			  .mouth_item{
				    display: flex;
					margin-bottom: 10rpx;
				  .mouthnum{
					  width: 136rpx;
					  height: 230rpx;
					  background-color: #fc701e;
					  color: #fff;
					  text-align: center;
					  line-height: 230rpx;
					  border-radius: 10rpx 0 0 10rpx;
					  margin-right: 10rpx;
				  }
				  .list{
					  width: 600rpx;
					  overflow: auto;  display: -webkit-flex;  display: flex;
					  .l_item{
						  width: 360rpx;
						margin-right: 20rpx;
						  .hot_left{
						  	  		  position: relative; 
									  background-image: url('https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/staduy2.0/012.png');
									   // background-color: red;
									   background-size: contain;
						  }
						  	  		.hot_left_bottom{
						  	  			width: 100%;
						  	  			background-color: #b33129;
						  	  			font-size: 18rpx;
						  	  			color: #fff;
						  	  			border-radius: 10rpx;
						  	  			padding: 10rpx 15rpx;
						  	  			position: absolute;
						  	  			bottom: 0;
						  	  			height: 65rpx;
						  	  		}
					  }
				  }
				  
			  }
		  }
	  }
	  .talkstar{
		  margin-top: 10rpx;
		  padding: 20rpx;
		  background-color: #fff;
		  .talk_title{
			  text-align: center;
			  padding: 20rpx 0;
			  color: #90e0b5;
			  border-bottom: 2rpx solid #f3f3f3;
		  }
		  .hot_title{
		  	display: flex;
		  	justify-content: space-between;
		  	align-items: center;
		  	.ht_right{
		  		display: flex;
		  		// justify-content: space-between;
		  		align-items: center;
		  		font-size: 24rpx;
		  	}
		  	.ht_left{
		  		font-size: 32rpx;
		  		font-weight: 600;
		  	}
		  }
		  .paiming{
			  padding: 20rpx 0;
			  .star{
				  padding: 20rpx;
				  display: flex;
				  justify-content: space-between;
				  .p_item{
				  				.image_2{
				  					width: 122rpx;
				  					height: 122rpx;
				  					border-radius: 50%;
				  					border: 2rpx solid #a9fcff ;
				  					position: relative;
				  				}  
				  				.image_1{
				  					width: 122rpx;
				  					height: 122rpx;
				  					border-radius: 50%;
				  					border: 2rpx solid #FED531 ;
				  					position: relative;
				  				} 
				  				.image_3{
				  					width: 122rpx;
				  					height: 122rpx;
				  					border-radius: 50%;
				  					border: 2rpx solid #FF9867;
				  					position: relative;
				  				} 
								.name{
									margin-top: 30rpx;
									font-size: 32rpx;
									font-weight: 600;
								}
								.vote{
									  width: 112rpx;
									  height: 46rpx;
									  border-radius: 40rpx;
									  background: #fc701e;
									  color: #fff;
									  font-size: 24rpx;
									  text-align: center;
									  line-height: 46rpx;
									  margin-top: 10rpx;
								}
				  			  }
				  }
			  }
			  .pa_bottom{
				  margin-top: 20rpx;
				  width: 100%;
				  text-align: center;
				  font-size: 24rpx;
				  color: #666666;
			  }
			  
	  }
	  .teacherstyle{
		 
		  margin-top: 10rpx;
		  .hot_title{
			   padding: 20rpx;
			  background-color: #fff;
		  	display: flex;
		  	justify-content: space-between;
		  	align-items: center;
		  	.ht_right{
		  		display: flex;
		  		// justify-content: space-between;
		  		align-items: center;
		  		font-size: 24rpx;
		  	}
		  	.ht_left{
		  		font-size: 32rpx;
		  		font-weight: 600;
		  	}
		  }
		  .ts_list{
			  margin-top: 10rpx;
			   
			  .ts_item{
				  margin-top: 10rpx;
				  padding: 20rpx;
				  background-color: #fff;
				  display: flex;
				  justify-content: space-between;
			   .ts_left{
				   .name{
					   padding: 10rpx 0;
					   display: flex;
					   justify-content: space-between;
					   align-items: center;
					   .top{
						   font-size: 32rpx;
						   font-weight: 600;
					   }
					   .t_vote{
						     width: 112rpx;
						     height: 42rpx;
							 font-size: 28rpx;
							 text-align: center;
							 line-height: 42rpx;
							 color: #fc701e;
						     border-radius: 40rpx;
						     border: 2rpx solid #fc701e;
					   }
				   }
				  .piaonum,.touxian,.year{
					   font-size: 28rpx;
					   color: #cecece;
					   padding: 10rpx 0;
				   }
			   }
			  }
		  }
	  }
	  .money{
		  margin-top: 10rpx;
		  padding: 20rpx;
		  background-color: #fff;
		  .hot_title{
		  			   padding: 20rpx;
		  			  background-color: #fff;
		  	display: flex;
		  	justify-content: space-between;
		  	align-items: center;
		  	.ht_right{
		  		display: flex;
		  		// justify-content: space-between;
		  		align-items: center;
		  		font-size: 24rpx;
		  	}
		  	.ht_left{
		  		font-size: 32rpx;
		  		font-weight: 600;
		  	}
		  }
		  .m_list{
			  display: flex;
			  justify-content: space-between;
		     .m_item{
				 border: 2rpx solid #FF9867;
				 padding: 10rpx;
				 border-radius: 10rpx;
				 text-align: center;
				 .m_pai{
					 font-size: 28rpx;
					 font-weight: 600;
					 color: #F12B10;
				 }
				 .m_moneynum{
					 font-size: 24rpx;
					 color: #cecece;
				 }
			 }
		  }
	  }
	  .guize{
		  margin-top: 10rpx;
		  padding: 20rpx;
		  background-color: #fff;
		  .hot_title{
		  			   padding: 20rpx;
		  			  background-color: #fff;
		  	display: flex;
		  	justify-content: space-between;
		  	align-items: center;
		  	.ht_right{
		  		display: flex;
		  		// justify-content: space-between;
		  		align-items: center;
		  		font-size: 24rpx;
		  	}
		  	.ht_left{
		  		font-size: 32rpx;
		  		font-weight: 600;
		  	}
		  }
		  .textcontent{
			  padding:  0 20rpx;
			  font-size: 28rpx;
			  color: #cecece;
		  }
	  }
  }
</style>
